<script>
import { main } from '@/util/mixins'
import * as service from 'services/x-start/mgr/rank'
import { mapState } from 'vuex'

export default {
  mixins: [main],
  data() {
    return {
      service,
      timeRadio: 'real',
    }
  },
  computed: {
    ...mapState({
      typeList: state => state.sportList,
    }),
  },
  methods: {
    sortChange(val) {
      const { column, ...data } = val
      this.tableData = this.tableData.sort(function(a, b) {
        if (data.order == 'ascending') {
          return b[data.prop] - a[data.prop]
        }
        return a[data.prop] - b[data.prop]
      })
    },
    change(time) {
      this.getList({
        startTime: time && time[0],
        endTime: time && time[1],
      })
    },
    getMatch(id) {
      return (
        this.typeList.find(item => item.id == id) &&
        this.typeList.find(item => item.id == id).sportName
      )
    },
  },
  watch:{
    timeRadio() {
      if(this.timeRadio == 'real') {
        this.getList()
      }
    }
  }
}
</script>

<template lang="pug">
Template(@sizeChange="handleSizeChange" @currentChange="handleCurrentChange" ref="child")
  span(slot="title") 排行榜
  .btns(slot="rightBtn")
    .group
      el-radio-group(v-model="timeRadio")
        el-radio( label="real" ) 实时
        el-radio( label="time" ) 时间段
      TimePick.timePick(@getTime="change" :disabled="timeRadio=='real'")
  .list(slot="list")
    el-table(ref="table"
      stripe
      :data="tableData"
      tooltip-effect="dark"
      fit
      @sort-change="sortChange"
      @selection-change="handleSelectionChange"
    )
      el-table-column(prop="rank" label="排名" )
      el-table-column(prop="type" label="运动类型" )
        template(slot-scope="{row}")
          span {{getMatch(row.type)}}
      el-table-column(prop="realPersonCount" sortable="realPersonCount" label="实时人数")
      el-table-column(prop="totalCount" sortable="totalCount" label="累计人次")
      el-table-column(prop="saturation" sortable="saturation" label="饱和度")
      el-table-column(prop="collectPower" sortable="collectPower" label="集流力")
</template>

<style lang="stylus" scoped>
.el-range-editor
  margin-left 20px
.el-radio-group
  line-height inherit
  .el-radio
    line-height inherit
@media screen and (max-width: 650px)
  .list
    padding-top 50px
  .timePick
    position absolute
    left 0
    top 50px
</style>